<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
    <title>ExtJS Image Crop Test</title>
   <link rel="stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ExtJS/ext-all.js"></script>
		
    <script type="text/javascript" src="../js/ext-plugin/Ext.ux.ImageCrop.js"></script>
    <script type="text/javascript" src="Extamples.CropWindow.ui.js"></script>
    <script type="text/javascript" src="Extamples.CropWindow.js"></script>
    <style type="text/css">
      *{margin:0;padding:0;}
      h1,h2,h3,p{margin-bottom:10px;}
    </style>
  </head>
  <body style="padding:20px;">
    <h1>Ext JS Image Crop Utility</h1>
    <p>You are looking for a Image Crop utility in Ext JS? <br />
    A Clientside Image Crop, cropping on the serverside by Ajax call?<br />
    Here you find a Ext JS Crop Library written by me for a Project. <br />
    You can use the Code as you like, only the URL http://www.thomas-lauria/ has to be in the used Files / Code<br />
    Questions? <a href="mailto:me@thomas-lauria.de">Mail me</a> or write to my <a href="http://blog.thomas-lauria.de/archives/13-Ext-JS-Image-Crop-update.html">blogentry</a>
    </p>
    <h2>Simple Example</h2>
    <div id="FOO"></div>
    <div id="output-1" style="color:red;"></div>
    <script type="text/javascript">
      Ext.EventManager.onDocumentReady(function(){
        /**
         * Simple Example:
         */
        var crop = new Ext.ux.ImageCrop({
          initialHeight: 165, 
          initialWidth: 220,
          imageUrl: 'images/hochschule-reutlingen_th.jpg',
          // the cropper can also be quadratic
          //quadratic: true,
          renderTo: 'FOO'
        });
        crop.on('change', function(foo,x) {
          Ext.get('output-1').update('X Offset: '+x.x+' Y Offset: '+x.y+' Width: '+x.width+' Height: '+x.height);
        });

        /**
         * Example with a Crop Window, triggered by a button:
         */
        new Ext.Button({
          renderTo: 'crop-test-button',
          text: 'Image Crop Window',
          handler: function() {
            //getting the image URL from whereever you want
            var imageURL = 'images/hochschule-reutlingen_medium.jpg';
            var cw = new Extamples.CropWindow({
              imageUrl: imageURL,
              listeners:{
                save: function(){
                  // handler if a crop was successfull, and the window was closed
                },
                scope: this
              }
            });
            cw.show();
          }
        });
      }, this, true);
    </script>
    <h3>Code to Simple Example</h3>
    <pre>
        var crop = new Ext.ux.ImageCrop({
          initialHeight: 165, 
          initialWidth: 220,
          imageUrl: 'images/hochschule-reutlingen_th.jpg',
          // the cropper can also be quadratic
          //quadratic: true,
          renderTo: 'FOO'
        });
        crop.on('change', function(foo,x) {console.dir(x);});
    </pre>
    <p>The JS Code is in <a href="Ext.ux.ImageCrop.js">Ext.ux.ImageCrop.js</a></p>
    <h3>Example in a Window</h3>
    <div id="crop-test-button"></div>
    <div id="output-2" style="color:red;"></div>
    <h3>Code to Example Window</h3>
    <pre>
        new Ext.Button({
          applyTo: 'crop-test-button',
          text: 'Image Crop Window',
          handler: function() {
            //getting the image URL from whereever you want
            var imageURL = '../images/hochschule-reutlingen_medium.jpg';
            var cw = new Extamples.CropWindow({
              imageUrl: imageURL,
              listeners:{
                save: function(){
                  // handler if a crop was successfull, and the window was closed
                },
                scope: this
              }
            });
            cw.show();
          }
        });
    </pre>
    <p>Additional JS Code is in <a href="Ext.ux.ImageCrop.js">Ext.ux.ImageCrop.js</a>, <a href="Extamples.CropWindow.ui.js">Extamples.CropWindow.ui.js</a> and <a href="Extamples.CropWindow.js">Extamples.CropWindow.ui.js</a>
    </p>
  </body>
</html>